<template>
  <div class="demo-inner-divider">form基本用法</div>
  <div>
    <e-form
      ref="formInline"
      :model="formInline"
      :label-width="80"
      :rules="ruleInline"
      :inline="true"
    >
      <e-formItem prop="user" label="user">
        <e-input
          type="text"
          v-model="formInline.user"
          placeholder="Username"
        >
          <template #prepend>
            <e-icon type="usergroup"></e-icon>
          </template>
        </e-input>
      </e-formItem>
      <e-formItem prop="password" label="password" :show-message="true">
        <e-input
          type="password"
          v-model="formInline.password"
          placeholder="Password"
        >
          <template #prepend>
            <e-icon type="hide"></e-icon>
          </template>
        </e-input>
      </e-formItem>
      <e-formItem>
        <e-button
          type="primary"
          @click="handleSubmit('formInline')"
        >登录</e-button
        >
      </e-formItem>
    </e-form>
  </div>

  <div class="demo-inner-divider">表单控件</div>
  <div>
    <e-form :model="formItem" :label-width="80">
      <e-formItem label="Input">
        <e-input
          v-model="formItem.input"
          placeholder="Enter something..."
        ></e-input>
      </e-formItem>
      <e-formItem label="Select">
        <e-select v-model="formItem.select">
          <e-option value="beijing">New York</e-option>
          <e-option value="shanghai">London</e-option>
          <e-option value="shenzhen">Sydney</e-option>
        </e-select>
      </e-formItem>
      <e-formItem label="DatePicker">
        <e-row>
          <e-col span="11">
            <e-datePicker
              type="date"
              placeholder="Select date"
              v-model="formItem.date"
            ></e-datePicker>
          </e-col>
          <e-col span="2" style="text-align: center">-</e-col>
          <e-col span="11">
            <e-timePicker
              type="time"
              placeholder="Select time"
              v-model="formItem.time"
            ></e-timePicker>
          </e-col>
        </e-row>
      </e-formItem>
      <e-formItem label="Radio">
        <e-radioGroup v-model="formItem.radio">
          <e-radio label="male">Male</e-radio>
          <e-radio label="female">Female</e-radio>
        </e-radioGroup>
      </e-formItem>
      <e-formItem label="Checkbox">
        <e-checkboxGroup v-model="formItem.checkbox">
          <e-checkbox label="Eat"></e-checkbox>
          <e-checkbox label="Sleep"></e-checkbox>
          <e-checkbox label="Run"></e-checkbox>
          <e-checkbox label="Movie"></e-checkbox>
        </e-checkboxGroup>
      </e-formItem>
      <e-formItem label="Switch">
        <e-switch v-model="formItem.switch" size="large">
          <template #open>
            <span>开</span>
          </template>
          <template #close>
            <span>关</span>
          </template>
        </e-switch>
      </e-formItem>
      <e-formItem label="Slider">
        <e-slider v-model="formItem.slider" range></e-slider>
      </e-formItem>
      <e-formItem label="Text">
        <e-input
          v-model="formItem.textarea"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="Enter something..."
        ></e-input>
      </e-formItem>
      <e-formItem>
        <e-button type="primary">Submit</e-button>
        <e-button style="margin-left: 8px">Cancel</e-button>
      </e-formItem>
    </e-form>
  </div>

  <div class="demo-inner-divider">对齐方式</div>
  <div>
    <e-form :model="formLeft" label-position="left" :label-width="100">
      <e-form-item label="Title">
        <e-input v-model="formLeft.input1"></e-input>
      </e-form-item>
      <e-form-item label="Title name">
        <e-input v-model="formLeft.input2"></e-input>
      </e-form-item>
      <e-form-item label="Aligned title">
        <e-input v-model="formLeft.input3"></e-input>
      </e-form-item>
    </e-form>
    <e-form :model="formRight" label-position="right" :label-width="100">
      <e-form-item label="Title">
        <e-input v-model="formRight.input1"></e-input>
      </e-form-item>
      <e-form-item label="Title name">
        <e-input v-model="formRight.input2"></e-input>
      </e-form-item>
      <e-form-item label="Aligned title">
        <e-input v-model="formRight.input3"></e-input>
      </e-form-item>
    </e-form>
    <e-form :model="formTop" label-position="top">
      <e-form-item label="Title">
        <e-input v-model="formTop.input1"></e-input>
      </e-form-item>
      <e-form-item label="Title name">
        <e-input v-model="formTop.input2"></e-input>
      </e-form-item>
      <e-form-item label="Aligned title">
        <e-input v-model="formTop.input3"></e-input>
      </e-form-item>
    </e-form>
  </div>

  <div class="demo-inner-divider">表单验证</div>
  <div>
    <e-form
      ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="80"
    >
      <e-formItem
        label="Name"
        prop="name"
        default-tips="这里是默认提示信息"
      >
        <e-input
          v-model="formValidate.name"
          placeholder="Enter your name"
        />
      </e-formItem>
      <e-formItem
        label="Age"
        prop="age"
        default-tips="这里是默认提示信息"
      >
        <e-input-number
          v-model="formValidate.age"
          placeholder="Enter your age"
          style="width: 120px"
          :min="1"
          :max="100"
          :allow-empty="false"
        />
      </e-formItem>
      <e-formItem label="E-mail" prop="mail">
        <e-input
          v-model="formValidate.mail"
          placeholder="Enter your e-mail"
        />
      </e-formItem>
      <e-formItem label="City" prop="city">
        <e-select v-model="formValidate.city" placeholder="Select your city">
          <e-option value="beijing">New York</e-option>
          <e-option value="shanghai">London</e-option>
          <e-option value="shenzhen">Sydney</e-option>
        </e-select>
      </e-formItem>
      <e-formItem label="Date" required>
        <e-row>
          <e-col span="11">
            <e-formItem prop="date" required>
              <e-datePicker
                type="date"
                placeholder="Select date"
                v-model="formValidate.date"
              ></e-datePicker>
            </e-formItem>
          </e-col>
          <e-col span="2" style="text-align: center">-</e-col>
          <e-col span="11">
            <e-formItem prop="time" required>
              <e-time-picker
                type="time"
                placeholder="Select time"
                v-model="formValidate.time"
              ></e-time-picker>
            </e-formItem>
          </e-col>
        </e-row>
      </e-formItem>
      <e-formItem label="Gender" prop="gender">
        <e-radioGroup v-model="formValidate.gender">
          <e-radio label="male">Male</e-radio>
          <e-radio label="female">Female</e-radio>
        </e-radioGroup>
      </e-formItem>
      <e-formItem label="Hobby" prop="interest">
        <e-checkboxGroup v-model="formValidate.interest">
          <e-checkbox label="Eat"></e-checkbox>
          <e-checkbox label="Sleep"></e-checkbox>
          <e-checkbox label="Run"></e-checkbox>
          <e-checkbox label="Movie"></e-checkbox>
        </e-checkboxGroup>
      </e-formItem>
      <e-formItem label="Desc" prop="desc">
        <e-input
          v-model="formValidate.desc"
          type="textarea"
          clearable
          show-word-limit
          :maxlength="500"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="Enter something..."
        ></e-input>
      </e-formItem>
      <e-formItem>
        <e-button
          type="primary"
          @click="handleSubmit('formValidate')"
        >Submit</e-button
        >
        <e-button
          @click="handleReset('formValidate')"
          style="margin-left: 8px"
        >Reset</e-button
        >
      </e-formItem>
    </e-form>
  </div>

  <div class="demo-inner-divider">自定义校验</div>
  <div>
    <e-form
      ref="formCustom"
      :model="formCustom"
      :rules="ruleCustom"
      :label-width="80"
    >
      <e-formItem label="Password" prop="passwd">
        <e-input type="password" v-model="formCustom.passwd"></e-input>
      </e-formItem>
      <e-formItem label="Confirm" prop="passwdCheck">
        <e-input type="password" v-model="formCustom.passwdCheck"></e-input>
      </e-formItem>
      <e-formItem label="Age" prop="age">
        <e-input type="text" v-model="formCustom.age" number></e-input>
      </e-formItem>
      <e-formItem>
        <e-button
          type="primary"
          @click="handleSubmit('formCustom')"
        >Submit</e-button
        >
        <e-button
          @click="handleReset('formCustom')"
          style="margin-left: 8px"
        >Reset</e-button
        >
      </e-formItem>
    </e-form>
  </div>

  <div class="demo-inner-divider">动态增减表单项</div>
  <div>
    <e-form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
      <template v-for="(item, index) in formDynamic.items">
        <e-formItem
          v-if="item.status"
          :key="index"
          :label="'Item ' + item.index"
          :prop="'items.' + index + '.value'"
          :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
          <e-row>
            <e-col span="18">
              <e-input type="text" v-model="item.value" placeholder="Enter something..."></e-input>
            </e-col>
            <e-col span="4" offset="1">
              <e-button @click="handleRemove(index)">Delete</e-button>
            </e-col>
          </e-row>
        </e-formItem>
      </template>
      <e-formItem>
        <e-row>
          <e-col span="12">
            <e-button type="dashed" long @click="handleAdd" icon="md-add">Add item</e-button>
          </e-col>
        </e-row>
      </e-formItem>
      <e-formItem>
        <e-button type="primary" @click="handleSubmit('formDynamic')">Submit</e-button>
        <e-button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</e-button>
      </e-formItem>
    </e-form>
  </div>
  <formMd class="markdown-body"></formMd>
</template>
<script>
import formMd from '../../docs/form.md'
export default {
  components:{formMd},
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please enter your password'))
      } else {
        if (this.formCustom.passwdCheck !== '') {
          // 对第二个密码框单独验证
          this.$refs.formCustom.validateField('passwdCheck')
        }
        callback()
      }
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please enter your password again'))
      } else if (value !== this.formCustom.passwd) {
        callback(new Error('The two input passwords do not match!'))
      } else {
        callback()
      }
    }
    const validateAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('Age cannot be empty'))
      }
      // 模拟异步验证效果
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('Please enter a numeric value'))
        } else {
          if (value < 18) {
            callback(new Error('Must be over 18 years of age'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    return {
      formInline: {
        user: '',
        password: 'PASSWORD',
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: '请输入用户名！',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码！',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 6,
            message: 'The password length cannot be less than 6 bits',
            trigger: 'blur',
          },
        ],
      },
      formItem: {
        input: '',
        select: '',
        radio: 'male',
        checkbox: [],
        switch: true,
        date: '',
        time: '',
        slider: [20, 50],
        textarea: '',
      },
      formLeft: {
        input1: '',
        input2: '',
        input3: '',
      },
      formRight: {
        input1: '',
        input2: '',
        input3: '',
      },
      formTop: {
        input1: '',
        input2: '',
        input3: '',
      },
      formValidate: {
        name: '',
        age: null,
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: '我是描述内容容若若若若若若若若若若若若若若若若若若若若',
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: 'The name cannot be empty',
            trigger: 'blur',
          },
        ],
        age: [
          {
            type: 'number',
            required: true,
            message: 'The age cannot be empty',
            trigger: 'blur',
          },
        ],
        mail: [
          {
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur',
          },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' },
        ],
        city: [
          {
            required: true,
            message: 'Please select the city',
            trigger: 'change',
          },
        ],
        gender: [
          {
            required: true,
            message: 'Please select gender',
            trigger: 'change',
          },
        ],
        interest: [
          {
            required: true,
            type: 'array',
            min: 1,
            message: 'Choose at least one hobby',
            trigger: 'change',
          },
          {
            type: 'array',
            max: 2,
            message: 'Choose two hobbies at best',
            trigger: 'change',
          },
        ],
        date: [
          {
            required: true,
            type: 'date',
            message: 'Please select the date',
            trigger: 'change',
          },
        ],
        time: [
          {
            required: true,
            type: 'string',
            message: 'Please select time',
            trigger: 'change',
          },
        ],
        desc: [
          {
            required: true,
            message: 'Please enter a personal introduction',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 20,
            message: 'Introduce no less than 20 words',
            trigger: 'blur',
          },
        ],
      },

      formCustom: {
        passwd: '',
        passwdCheck: '',
        age: '',
      },
      ruleCustom: {
        passwd: [{ validator: validatePass,required:true, trigger: 'blur' }],
        passwdCheck: [{ validator: validatePassCheck, trigger: 'blur' }],
        age: [{ validator: validateAge, trigger: 'blur' }],
      },

      index: 1,
      formDynamic: {
        items: [
          {
            value: '',
            index: 1,
            status: 1,
          },
        ],
      },
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset(name) {
      console.log("name",name)
      this.$refs[name].resetFields()
    },
    handleAdd() {
      this.index++
      this.formDynamic.items.push({
        value: '',
        index: this.index,
        status: 1,
      })
    },
    handleRemove(index) {
      this.formDynamic.items[index].status = 0
    },
    onValidate(prop, status, error){
      console.log('prop, status, error',prop, status, error)
    }
  },
}
</script>
